<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>薪资管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/salary/salarylist' }">薪资列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row class="margintop20">
      <el-col>
        <el-button type="success" @click="showDialog">新增岗位</el-button>
      </el-col>

      <el-col>
        <el-table
          :data="salarylist.slice((page-1)*pageSize,pageSize*page)"
          class="tableinfo margintop20"
          style="width: 100%"
          stripe
          v-if="salarylist"
        >
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="岗位" sortable prop="work">
            <template slot-scope="scope">
              <i class="el-icon-star-off"></i>
              <el-tag>{{scope.row.work}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="薪资" prop="salary">
            <template slot-scope="scope">
              <!-- <i class="el-icon-star-off"></i> -->
              <el-tag
                style="margin-left: 10px"
                :type=" scope.row.roleid | colortype "
              >{{ scope.row.salary }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="showUpdate(scope.row)">编辑</el-button>
              <el-popconfirm
                confirmButtonText="好的"
                cancelButtonText="不用了"
                icon="el-icon-info"
                iconColor="red"
                title="确定删除此岗位吗？"
                @onConfirm="DeleteWork(scope.row)"
              >
                <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <div class="flexbox">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="changeCurrent"
            :page-size="pageSize"
            :current-page="page"
            :total="total"
          ></el-pagination>
          <span>共 {{total}} 条数据</span>
        </div>
      </el-col>
    </el-row>

    <!-- 岗位信息弹窗 -->
    <el-dialog title="新增岗位信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form
        :model="form"
        :rules="rules"
        ref="myform"
        label-width="100px"
        label-position="right"
        class="myform"
      >
        <el-form-item label="岗位" prop="work">
          <!-- <el-select v-model="form.roleid">
            <el-option
              v-for="(role,i) in worklist"
              :key="i"
              :label="role.label"
              :value="role.value"
            ></el-option>
          </el-select>-->
          <el-input v-model="form.work"></el-input>
        </el-form-item>
        <el-form-item label="薪资" prop="salary">
          <el-input v-model="form.salary"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addwork">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog title="修改岗位信息" :visible.sync="updateVisible" width="30%" :before-close="updateClose">
      <el-form
        :model="update"
        :rules="rules"
        ref="updateform"
        label-width="100px"
        label-position="right"
        class="myform"
      >
        <el-form-item label="岗位" prop="work">
          <el-input v-model="update.work"></el-input>
        </el-form-item>
        <el-form-item label="薪资" prop="salary">
          <el-input v-model="update.salary"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateById">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import { getsalary, addwork, delworkone, updatework } from "@/api";
import { worklist } from "@/utils/index";
export default {
  data() {
    return {
      form: {},
      salarylist: [],
      pageSize: 10,
      page: 1,
      dialogVisible: false,
      worklist,
      update: {},
      updateVisible: false,
      rules: {
        salary: [
          { required: true, message: "请输入薪资", trigger: "blur" },
          // {
          //   validator:(rule,value,callback) =>{
          //     var salaryReg = /^[0-9]$/;

          //     if(!salaryReg.test(value)){
          //       callback(new Error('请正确输入薪资'))
          //     }else{
          //       callback();
          //     }
          //   },
          //   trigger:'change'
          // },
        ],
        work: [{ required: true, message: "请输入工种名字", trigger: "blur" }],
      },
    };
  },
  computed: {
    total() {
      return this.salarylist.length;
    },
  },
  methods: {
    //编辑工种信息,显示修改弹窗
    showUpdate(row) {
      //修改工种信息弹窗
      this.updateVisible = true;
      this.update = { ...row }; //把要修改的数据传到form表单中
    },
    updateById() {
      this.$refs.updateform.validate((valid) => {
        if (valid) {
          updatework(this.update)
            .then((res) => {
              if (res.type) {
                console.log(6666);
                this.updateVisible = false;
                // this.salarylist = this.salarylist.map(item=>{
                //   if(item._id == this.updateform._id){
                //     this.updateform.roleid =  this.updateform.roleid+'';
                //     item = {...item,...this.updateform}
                //   }
                //   return item;
                // })
                // this.salarylist.forEach((item, i) => {
                //   if (item._id == this.updateform._id) {
                //     this.updateform.roleid = this.updateform.roleid + "";
                //     Vue.set(this.salarylist, i, this.updateform);
                //   }
                // });
                 this.salarylist.forEach((item, i) => {
                  if (item._id == this.updateform._id) {
                    this.updateform.roleid = this.updateform.roleid + "";
                    Vue.set(this.salarylist, i, this.updateform);
                  }
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message.error("请完善修改信息再提交");
          return false;
        }
      });
    },
    //删除工种
    DeleteWork(row) {
      delworkone({
        _id: row._id,
      })
        .then((res) => {
          if (res.type) {
            // this.salarylist = res.result;
            console.log(111);
            this.salarylist = this.salarylist.filter(
              (item) => item._id != row._id
            );
          }
        })
        .catch((err) => {});
    },
    //添加岗位/工种
    addwork() {
      this.$refs.myform.validate((valid) => {
        if (valid) {
          // console.log(111);
          this.salarylist.salary = this.salarylist.salary * 1;
          addwork(this.form)
            .then((res) => {
              if (res.type) {
                this.dialogVisible = false;
                getsalary()
                  .then((res) => {
                    if (res.type) {
                      this.salarylist = res.result;
                      this.form = {};
                    }
                  })
                  .catch((err) => {});
              }
            })
            .catch((err) => {});
        } else {
          this.$message.error("请填写岗位信息");
          return false;
        }
      });
    },
    updateClose() {
      this.updateVisible = false;
    },

    handleClose() {
      this.dialogVisible = false;
    },
    showDialog() {
      this.dialogVisible = true;
    },
    changeCurrent(page) {
      this.page = page;
    },
  },
  mounted() {
    getsalary()
      .then((res) => {
        if (res.type) {
          this.salarylist = res.result;
        }
      })
      .catch((err) => {});
  },
};
</script>